<template>
  <div class="add-goods">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <!-- <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step> -->
    </el-steps>
    <el-tabs v-model="activeName" :rules="rules" :model="goodsForm" @tab-click="handleClick" tab-position="left"
      ref="goodsuForm" class="mt-20">
      <el-tab-pane label="基本信息" name="first">
        <el-form label-width="80px">
          <el-form-item label="活动名称" prop='goods_name'>
            <el-input v-model="goodsForm.goods_name" placeholder="请输入商品活动名称"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop='goods_price'>
            <el-input v-model="goodsForm.goods_price" placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop='goods_weight'>
            <el-input v-model="goodsForm.goods_weight" placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop='goods_number'>
            <el-input v-model="goodsForm.goods_number" placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="热销商品" prop="is_promote">
            <el-switch v-model="goodsForm.is_promote"></el-switch>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品介绍" name="second">
        <el-form label-width="80px">
          <el-form-item label="商品状态" prop='goods_state'>
            <el-input v-model="goodsForm.goods_state" placeholder="0未审核1审核中2已审核"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍" prop='goods_introduce'>
            <el-input v-model="goodsForm.goods_introduce"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop='goods_cat'>
            <el-cascader :options="options" v-model="selectedOptions" :props="props" @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品图片" name="three">
        <el-upload action="http://localhost:8888/api/private/v1/upload" :on-preview="handlePreview" prop='pics'
          :on-success="handleSuccess" :headers="setHeader()" :on-remove="handleRemove" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-tab-pane>
    </el-tabs>
    <el-button style="margin-top: 12px;" @click="addgoodsSubmit('goodsuForm')">确认提交</el-button>
  </div>
</template>
<script>
  import {
    addgoods,
    getCategories,
    addCategories,
    editCategoriesRight,
    getCategoriesById,
    delCategoriesRight
  } from '@/api'
  export default {
    data() {
      return {
        goodsForm: {
          goods_name: '',
          goods_cat: '',
          goods_price: '',
          goods_weight: '',
          goods_number: '',
          goods_introduce: '',
          // attrs: '',
          pics: [{
            pic: ''
          }],
          goods_state: '',
          is_promote: 'false',
        },
        active: 0,
        props: {
          value: 'cat_id',
          label: 'cat_name'
        },
        activeName: 'first',
        options: [], // 级联选择器的数据源
        selectedOptions: [], // 级联选择器选中后的数据
        rules: {
          goods_name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          goods_price: [{
            required: true,
            message: '请输入价格',
            trigger: 'change'
          }],
          goods_weight: [{
            required: true,
            message: '请输入重量',
            trigger: 'change'
          }],
          goods_number: [{
            required: true,
            message: '请输入数量',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      submitForm(formName) {
        console.log(this.goodsuForm)

        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      addgoodsSubmit(formName) {
        // console.log(this.$refs[formName])
        // this.$refs[formName].validate(valide => {
        //   if (valide) {
            // console.log(valide)
            // 执行添加用户方法
            console.log(this.goodsForm)
            addgoods(this.goodsForm).then(res => {
              console.log(res)
              if (res.meta.status === 201) {
                this.$message({
                  type: 'success',
                  message: '创建用户成功'
                })
                this.$router.push({
                  name: 'goods'
                })
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
        //   }
        // })
      },
      handleClick(tab, event) {
        console.log(tab)
        console.log(event)
        switch (tab.name) {
          case 'first':
            this.active = 0
            break
          case 'second':
            this.active = 1
            break
          case 'third':
            this.active = 2
            break
          default:
            this.active = 0
            break
        }
        if (tab.index == 1) {
          getCategories({
            type: '2'
          }).then(res => {
            console.log(res)
            if (res.meta.status === 200) {
              this.options = res.data
            }
          })
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleSuccess(response, file, fileList) {
        console.log(response)
        console.log
        if (response.meta.status === 200) {
          this.$message({
            type: 'success',
            message: response.meta.msg
          })
          this.goodsForm.pics[0].pic = response.data.tmp_path
        } else {
          this.$message({
            type: 'warning',
            message: res.meta.msg
          })
        }
      },
      handleChange(value) {
        console.log(value)
        // return this.goodsForm.goods_cat= value[0]+','+value[1]
        return this.goodsForm.goods_cat = value[0] + ',' + value[1] + ',' + 1
      },
      setHeader() {
        let token = localStorage.getItem('mytoken')
        return {
          Authorization: token
        }
      }
    }
  }

</script>
<style lang="scss" scoped>
  .add-goods {
    .mt-20 {
      margin-top: 20px;
    }
  }

</style>
